.upload-file-cont.image-list {
    position: relative;
    height: auto;
    background-size: cover;
    padding: 15px 15px 0px;
    background-color: #FFFFFF;
    overflow: hidden;
    .image-item {
        width: 65px;
        height: 65px;
        background-size: 100% 100%;
        display: inline-block;
        position: relative;
        border-radius: 2px;
        margin-right: 15px;
        margin-bottom: 15px;
        vertical-align: top;
        border: none;
        &.imgfile {
            border: solid 1px #e8e8e8;
        }
        .file {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
            z-index: 0;
            &.hide {
                display: none;
            }
        }
        &[data-type=upload-input] {
            .file-name-fot,
            .image-close {
                display: none;
            }
        }
        .image-close {
            position: absolute;
            right: 0px;
            top: 0px;
            width: 25px;
            height: 25px;
            z-index: 5;
            &:before {
                $size: 18px;
                content: 'x';
                position: absolute;
                right: -6px;
                top: -6px;
                width: $size;
                height: $size;
                text-align: center;
                line-height: $size;
                border-radius: $size/2;
                background-color: #FF5053;
                color: #f3f3f3;
                font-size: 9px;
                font-weight: 200;
                z-index: 1;
            }
        }
        .image-up {
            height: 65px;
            width: 65px;
            border-radius: 2px;
            line-height: 65px;
            border: 1px solid #ccc;
            color: #ccc;
            display: inline-block;
            text-align: center;
            position: relative;
            &:before,
            &:after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                background-color: #CCCCCC;
            }
            &:before {
                width: 2px;
                height: 50%;
            }
            &:after {
                height: 2px;
                width: 50%;
            }
        }
        .file-name-fot {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 16px;
            line-height: 16px;
            font-size: 12px;
            color: #FFFFFF;
            background-color: rgba(0, 0, 0, 0.6);
            text-align: center;
            width: 100%;
            white-space: nowrap;
            padding: 0 3px;
            box-sizing: border-box;
            &.hide {
                display: none;
            }
        }
    }
    .upload-file-progress {
        background-color: #007AFF;
        position: absolute;
        top: 0;
        left: 0;
        width: 1%;
        height: 2px;
        -webkit-transition: width 0.1s ease-in;
        -moz-transition: width 0.1s ease-in;
        -ms-transition: width 0.1s ease-in;
        -o-transition: width 0.1s ease-in;
        transition: width 0.1s ease-in;
        display: none;
    }
    .upload-file-progress.active {
        display: block;
    }
    .image-item{
        $bg_arr : zip,img,mp4,word,excel,ppt,pdf,txt,apk,ipa,undfined;
        @each $val in $bg_arr {
            &.#{$val} {
                background-image: url('../images/#{$val}.png');
            }
        }
    }
    
}